{% extends 'base.html' %}
{% block title %}
    四Y-个人中心
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="/static/css/personal_style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
{% endblock %}
{% block headjs %}
{% endblock %}
{% block content-center %}

    <div id="change_headPhoto_smallBox"></div>
    <div class="change_headPhoto_form">
        <i class="bi bi-x-lg" onclick="bi_x()"></i>
        <img id="head_photo" style="width: 200px; height: 200px;" {% if userinfo %}src="{{ userinfo.0.profilePhoto }}"
             {% else %}src="/static/images/1.jpg"{% endif %} alt="">
        <form action="/personal/" method="post" enctype="multipart/form-data">

            <input onclick="Upload(this)" type="button" value="上传头像">

            <input type="file" onchange="upload_img(this)" id="get_headPhoto" name="get_headPhoto" value="更换头像"
                   style="display: none">
            <input id="upload_img_btn" type="submit" value="确认修改">
        </form>
    </div>
    <div class="content_personal">
        <h1 class="personal_title">个人中心</h1>
        <div class="headPhoto">
            <img id="headPhoto_img" style="width: 200px; height: 200px;" src="{{ userinfo.0.profilePhoto }}" alt="">
            <div class="change_headPhoto">
                <button class="change_headPhoto_btn" type="button" onclick="change_headPhoto(this)">更换头像</button>
            </div>
        </div>
        <div class="personal_message">
            <input class="name_text" type="text" value="{{ userinfo.0.name }}">
            <span class="email_text">Email:{{ userinfo.0.email }}</span>
            <div class="suggest">
                <textarea name="suggest" id="suggest" cols="35" rows="5" required placeholder="分享你的意见!"></textarea>
                <input type="submit" value="提    交" onclick="suggest_submit()">
            </div>
            {#            <div class="input-box">#}
            {#                <input disabled {% if userinfo %}value="{{ userinfo.0.email }}"{% endif %}>#}
            {#            </div>#}
            {#            <div class="input-box">#}
            {#                <input tabindex="2" name="password" {% if password %}value="{{ password }}"{% endif %} id="password"#}
            {#                       type="password" required> #}
            {#            </div>#}
            {#            <div class="input-box">#}
            {#                <input tabindex="3" name="re_password" {% if re_pwd %}value="{{ re_pwd }}"{% endif %}#}
            {#                       id="re_password" type="password" required>#}
            {#                <label for="password">确认密码:</label>#}
            {#            </div>#}
        </div>
        <div class="personal_nav">
            <ul>
                <li class="nav_one" onclick="change_personal('personal')">个人中心</li>
                <li class="nav_two" onclick="change_personal('suggest')">我的意见</li>
            </ul>
        </div>

        <div class="suggest_mine">
            <div class="later_page"><span class="page_later_id" onclick="later_page(this)" id="sub"><</span></div>
            {% for suggest in suggests %}
                <div class="suggest_out">

                    <div class="in_img"><img src="{{ suggest.profilePhoto }}" alt=""></div>
                    <p class="suggest_name">{{ suggest.name }}</p>
                    <p class="suggest_content">{{ suggest.content }}</p>
                    <input class="suggest_id" onclick="del_suggest_id(this.id)" id="{{ suggest.id }}" type="submit"
                           value="删除">
                </div>
            {% endfor %}
            <div class="next_page"><span class="page_next_id" onclick="next_page(this)" id="add">></span></div>
        </div>
    </div>
    <div class="suggest_is_ok" style="display: none">
        <p class="success_text">提交成功!</p>
        <p class="fault_text">服务器错误404,提交失败..</p>
        <input type="submit" value="确 定" onclick="suggest_is_ok()">
    </div>
{% endblock %}


{% block footjs %}
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script>
        function del_suggest_id(suggest_id) {
            alert(suggest_id)
        }
    </script>
    <script>
        function later_page(obj) {
            var page_id = obj.id.valueOf()
            if (page_id >= 2) {
                page = parseInt(page_id)
                page -= 1
            } else {
                page = 1
            }
            $.ajax({
                url: '/personal/',
                type: 'get',
                dataType: 'JSON',
                data: {'page': page},
                traditional: true,
                success(data) {
                    page = data['page']
                    {#alert(data['page'])#}
                    var json = JSON.parse(data['suggests']);
                    $('.suggest_out').remove();
                    $.each(json, function (index, value) {

                        {#console.log(index);  //取出索引#}
                        var src = value['fields']['profilePhoto'];
                        {#alert(value['fields']['name']) // 取出每个元素#}
                        var comment_html = "<div class='suggest_out'>" +
                            "<div class='in_img'>" + "<img " + "src=" + src + ">" + "</div>" + "<p class='suggest_name'>" + value['fields']['name'] + "</p>" + "<p class='suggest_content'>" + value['fields']['content'] + "</p>"
                            + "<input class='suggest_id' onclick='del_suggest_id(this.id)' type='submit' value='删除' " + "id=" + value['pk'] + "></input>"
                            + "</div>";
                        $('.suggest_mine').append(comment_html);
                    })
                    $('.page_later_id').attr('id', data['page'])
                    $('.page_next_id').attr('id', data['page'])

                },
            });
        }

        function next_page(obj) {
            var page_id = obj.id.valueOf()
            if (page_id == 'add') {
                page =
                {{ page }}
                if (page == {{ max_page }}) {

                } else {
                    page += 1;
                }
            } else if (page_id == {{ max_page }}) {
                page = page_id;
            } else {
                page += 1;
            }
            $.ajax({
                url: '/personal/',
                type: 'get',
                dataType: 'JSON',
                data: {'page': page},
                traditional: true,
                success(data) {
                    {#alert(data['suggests'].valueOf())#}
                    page = data['page']
                    {#alert(data['suggests'])#}
                    {#alert(data['page'])#}
                    var json = JSON.parse(data['suggests']);
                    $('.suggest_out').remove();
                    $.each(json, function (index, value) {
                        {#console.log(index);  //取出索引#}

                        var src = value['fields']['profilePhoto'];
                        {#alert(value['fields']['name']) // 取出每个元素#}
                        var comment_html = "<div class='suggest_out'>" +
                            "<div class='in_img'>" + "<img " + "src=" + src + ">" + "</div>" + "<p class='suggest_name'>" + value['fields']['name'] + "</p>" + "<p class='suggest_content'>" + value['fields']['content'] + "</p>"
                            + "<input class='suggest_id' onclick='del_suggest_id(this.id)' type='submit' value='删除' " + "id=" + value['pk'] + "></input>"
                            + "</div>";
                        $('.suggest_mine').append(comment_html);
                    })
                    $('.page_later_id').attr('id', data['page'])
                    $('.page_next_id').attr('id', data['page'])

                },
                error(data) {
                }
            });
        }

        function change_personal(sign) {
            if (sign == 'personal') {
                $('.personal_title').html('个人中心');
                $('.headPhoto').show();
                $('.personal_message').show();
                $('.suggest_mine').hide();
                {#alert(111)#}
            } else if (sign == 'suggest') {
                {#alert(222)#}
                $('.personal_title').html('我的留言');
                $('.headPhoto').hide();
                $('.personal_message').hide();
                $('.suggest_mine').show();
            }
        }
    </script>
    <script>
        function bi_x() {
            $('#change_headPhoto_smallBox').hide();
            $('.change_headPhoto_form').hide();
        }

        function change_headPhoto(obj) {
            $('#change_headPhoto_smallBox').show();
            $('.change_headPhoto_form').show();
        }

        function Upload(obj) {
            $('#get_headPhoto').trigger('click');
        }

        function upload_img(obj) {
            $('#get_headPhoto').trigger('click');
            var a = event.target.files[0];
            //取文件的路径 注意 浏览器的保密协议
            var url = window.URL.createObjectURL(a);
            document.getElementById('head_photo').src = url;
        }
    </script>
    <script>
        function logout() {
            $.ajax({
                url: '/logout',
                type: 'get',
                dataType: 'JSON',
                data: {"sign": "click"},
                traditional: true,

            });
        }

        function suggest_submit() {
            var suggest = $('#suggest').val();
            if (suggest) {
                $.ajax({
                    url: '/personal/',
                    type: 'post',
                    dataType: 'JSON',
                    data: {"suggest": suggest},
                    traditional: true,
                    success(result) {
                        if (result['sign'] == "success") {
                            $('#change_headPhoto_smallBox').show();
                            $('.suggest_is_ok').show();
                            $('.fault_text').hide();
                            $('#suggest').val('');
                            $('#suggest').attr("placeholder", '分享你的意见!')
                        } else if (result['sign'] == "fault") {
                            $('#change_headPhoto_smallBox').show();
                            $('.suggest_is_ok').show();
                            $('.success_text').hide();
                            $('#suggest').val('');
                        }
                    }
                });
            } else {
                $('#suggest').attr("placeholder", '意见不可为空!!!')
            }
        }

        function suggest_is_ok() {
            $('#change_headPhoto_smallBox').hide();
            $('.suggest_is_ok').hide()
        }
    </script>
{% endblock %}